<template>
	<div class="foot_goods table-theme">
		<head-title title="运营--商品足迹"></head-title>
		<el-card>
			<div class="top-menu">
				<div class="menu-left">
					<tabs-view :list="classifyList" :tabsIndex="type" @roleType="roleType"></tabs-view>
				</div>
				<div class="menu-right">
					<refresh-button @refresh="refreshPage"></refresh-button>
					<search-view :option="searchOption" @value="goSearch" @clear="refreshPage" ></search-view>
				</div>
			</div>
			<p class="data-number">总足迹数：{{ total }}</p>
			<el-table :data="userBrowseList" stripe>
				<el-table-column label="用户序号" align="center" prop="user_id"></el-table-column>
				<el-table-column label="头像" align="center" width="80">
					<template slot-scope="scope">
						<el-image :src="scope.row.heard_img" style="width: 50px; height: 50px; vertical-align: top;"></el-image>
					</template>
				</el-table-column>
				<el-table-column label="名字" align="center" prop="nickname"></el-table-column>
				<el-table-column label="电话" align="center" prop="phone"></el-table-column>
				<el-table-column label="推荐人ID" align="center" prop="parent_id"></el-table-column>
				<el-table-column label="商品名称" align="center" prop="goods_name"></el-table-column>
				<el-table-column label="型号" align="center" prop="goods_sn"></el-table-column>
				<el-table-column label="主图" align="center" width="80">
					<template slot-scope="scope">
						<ImgPopover :src="scope.row.image_middle"></ImgPopover>
					</template>
				</el-table-column>
				<el-table-column label="查看时间" align="center" prop="add_time"></el-table-column>
				<el-table-column label="停留时间" align="center" prop="">
					<template slot-scope="scope">
						{{ scope.row.stay_time }}s
					</template>
				</el-table-column>
				<el-table-column label="浏览次数" align="center" prop="num"></el-table-column>
				<el-table-column label="操作" align="center" width="150">
					<template slot-scope="scope">
						<el-button type="primary" size="mini" @click="goFootDetails(scope.row.user_id)">查看详情</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="pages"><el-pagination background layout="prev, pager, next, jumper" :total="total" @current-change="init" :current-page="page"></el-pagination></div>
		</el-card>
	</div>
</template>

<script>
import ImgPopover from '@/components/ImgPopover';
import TabsView from '@/components/TabsView'
export default {
	components: {
		ImgPopover,
		TabsView
	},
	data() {
		return {
			userBrowseList: [], // 浏览记录列表
			total: 0,totalData: 0, 
			type: 0,
			page: 0,
			classifyList: ['所有','小程序','APP','H5','PC' ,'Ipad' , '后台系统' ],
			searchOption: [
				{
					value: 0,
					label: "用户ID",
				},
				{
					value: 1,
					label: "归属商家",
				},
				{
					value: 2,
					label: "推荐人",
				},
			],
			classSelect: 0,
			selectContent: "",
		};
	},
	methods: {
		// 初始化列表
		init(e) {
			this.page = e;
			let data = {
				page: e - 1 ? e - 1 : 0,
				limit: 10,
				type: this.type,
				group:1,
				store_id: localStorage.getItem('store_id')
			};

			if (this.classSelect == 0) {
				data.user_id = this.selectContent;
			} else if (this.classSelect == 1) {
				data.store_id = this.selectContent;
			} else if (this.classSelect == 2) {
				data.parent_id = this.selectContent;
			}

			if (this.type == 0) {
				delete data.type;
			}

			this.$http(this.$ApiList.GoodsBrowseList, data).then(res => {
				this.userBrowseList = [];
				res.datas.data.forEach(item => {
					this.userBrowseList.push(item);
				});
				this.total = res.datas.count;
			});
		},
		goSearch(classSelect, selectContent) {
			this.classSelect = classSelect;
			this.selectContent = selectContent;
			this.init();
		},
		roleType(index) {
			this.type = index;
			//console.log(this.type);
			this.init();
		},
		goFootDetails(id) {
			this.$router.push({ path: '/foot_details', query: { id: id } });
		},
		refreshPage() {
			this.page = 1;
			this.type = 0;
			this.selectContent = '';
			this.classSelect = 0;
			this.init()
		}
	},
	created() {
		this.init();
	}
};
</script>
<style lang="scss" scoped>

</style>
